<template>
  <!-- 用户管理 -->
  <div>
    <el-card class="box-card manage">
      <!-- 头部 -->
      <div slot="header" class="clearfix manage_headerd">
        <!-- 返回 -->
        <div class="back" @click="backClick">
          <i></i>
          <span>返回</span>
        </div>
        <h1>修改用户</h1>
      </div>
      <!-- 新增用户 -->
      <div class="manage_base">
        <el-form :label-position="labelPosition" label-width="90px" :model="formmanageBase">
          <h2>基本资料</h2>
          <el-form-item label="会员id:">
            <el-input v-model="formmanageBase.uuid"  :disabled="true" ></el-input>
          </el-form-item>
          <el-form-item label="昵称:">
            <el-input v-model="formmanageBase.nick_name"></el-input>
          </el-form-item>
          <el-form-item label="头像:">
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-remove="handleRemove"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
            >
              <div class="upload_base">
                <i></i>
                <span>选择图片</span>
              </div>
              <span class="noSelect" v-if="uploadImg==0">[未选择图片]</span>
              <span class="noSelect" v-if="uploadImg!==0">[已选择图片]</span>
            </el-upload>
          </el-form-item>
          <el-form-item label="手机号码:">
            <el-input v-model="formmanageBase.phone"></el-input>
            <span class="noSelect">[更换手机]</span>
          </el-form-item>
          <el-form-item label="性别:">
            <el-input v-model="formmanageBase.sex"></el-input>
          </el-form-item>
          <el-form-item label="职业:">
            <el-input v-model="formmanageBase.occupation"></el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="formmanageBase.email"></el-input>
          </el-form-item>
          <el-form-item label="地址:">
            <el-input v-model="formmanageBase.adress"></el-input>
          </el-form-item>
          <h2>管理员操作</h2>
          <el-form-item label="是否禁用:">
            <el-radio v-model="formmanageBase.undisable" label="1">正常</el-radio>
            <el-radio v-model="formmanageBase.undisable" label="2">禁用</el-radio>
          </el-form-item>
          <el-form-item label="可用积分:">
            <el-input v-model="formmanageBase.integral"></el-input>
            <span class="noSelect">[改变积分]</span>
          </el-form-item>
          <el-form-item label="会员等级:" >
            <el-input v-model="formmanageBase.vip_type"  ></el-input>
            <span class="noSelect">[改变会员等级]</span>
          </el-form-item>
          <el-form-item label="会员截至:">
            <el-date-picker
              v-model="formmanageBase.vip_end_time"
              type="datetime"
              format="yyyy-MM-dd hh:mm"
              value-format="yyyy-MM-dd hh:mm"
              placeholder="选择日期时间">
            </el-date-picker>
            <span class="noSelect">[会员截止时间]</span>
          </el-form-item>
          <el-button type="primary"  @click="handleModify">保存</el-button>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<!-- 引入组件库 -->
<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
export default {
  data() {
    return {
      //   上传图片
      uploadImg: 0,
      // 靠右对齐
      labelPosition: "right",
      // 用户信息
      formmanageBase: {
      },
        token : this.$route.query.token,
        uuid : this.$route.query.id


    };
  },

    created(){

        this.$axios.post("/userApi/login/queryUser",{
            uuid  :  this.uuid
        }).then(res => {
            const  resdata = res.data;
            this.formmanageBase = resdata.data;
            this.formmanageBase.vip_end_time = new Date(this.formmanageBase.vip_end_time)
            if(this.formmanageBase.vip_type=== '1'){
                this.formmanageBase.vip_type="月会员";
            } else if(this.formmanageBase.vip_type==='2'){
                this.formmanageBase.vip_type="季会员";
            }else if(this.formmanageBase.vip_type==='3'){
                this.formmanageBase.vip_type="年会员";
            }
        });
    },

    methods: {
        stateFormat(row, column) {
            console.log(row.vip_type)
            if (row.vip_type === null) {
                return '无'
            } else if (row.vip_type === '1') {
                return '月会员'
            } else if (row.vip_type === '2') {
                return '季会员'
            }else if (row.vip_type === '3') {
                return '年会员'
            }
        },
    backClick() {
      this.$router.go(-1);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.uploadImg = fileList.length;
      console.log(this.uploadImg);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
};
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.manage_headerd {
  margin: 28px 0 27px 50px;
  position: relative;
}
.manage_headerd i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_headerd span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_headerd h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.manage .el-card__header {
  padding: 0;
}
.manage_base {
  margin: 28px 0px 41px 80px;
}
.manage_base h2 {
  border-left: 4px solid #3f51b5;
  margin: 0;
  margin-bottom: 28px;
  padding-left: 10px;
  font-size: 20px;
  color: #212121;
}
.manage_base .el-input,
.manage_base .el-input__inner,
.upload_base {
  width: 160px;
}
.upload_base {
  float: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.manage_base .el-form-item__label {
  font-size: 18px;
  color: #212121;
}
.upload_base i {
  /* display: block; */
  float: left;
  width: 28px;
  height: 20px;
  background: url("../assets/img/photo.png");
  background-size: 28px 20px;
  margin: 8px 10px 8px 16px;
}
.upload_base span {
  font-size: 16px;

  color: #757575;
}
.noSelect {
  margin-left: 10px;
  color: #757575;
  font-size: 16px;
}
.manage_base .el-button {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  border: none;

  font-size: 24px;
  color: #ffffff;
}
</style>
